<template>
  <div class="note-card" @click="goToDetail" :style="{background: importance == 0 ? 'rgba(255, 77, 79, 0.7)': importance == 1 ? 'rgba(250, 173, 20, 0.7)': importance == 2 ? 'rgba(82, 196, 26, 0.7)': 'rgba(191, 191, 191, 0.7)'}">    
    <h3>{{ title }}</h3>
    <!-- <div v-html="content"></div> -->
    <div style="max-height: 200px; overflow-y: auto;position: relative;
    z-index: 0;">
      <mavon-editor v-model="content" :language="language" :font-size="fontSize" :scroll-style="scrollStyle"
      :box-shadow="boxShadow" :box-shadow-style="boxShadowStyle" :transition="transition"
      :toolbars-background="toolbarsBackground" :preview-background="previewBackground" :subfield="subfield"
      :default-open="defaultOpen" :placeholder="placeholder" :editable="editable" :code-style="codeStyle"
      :toolbars-flag="toolbarsFlag" :navigation="navigation" :short-cut="shortCut" :autofocus="autofocus"
      :ishljs="ishljs" :image-filter="imageFilter" :image-click="imageClick" :tab-size="tabSize" :html="html"
      :xss-options="xssOptions" :toolbars="toolbars"></mavon-editor>
    </div>
    <div class="tags">
      <span v-for="tag in tags" :key="tag" class="tag">{{ tag }}</span>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { jump } from "@/utils/commonFunction";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.component("mavon-editor", mavonEditor);
export default {
  props: {
    id: Number,
    title: String,
    content: String,
    tags: Array,
    importance: Number
  },
  data() {
    return {
      note: {

      },
      language: "zh-CN", //语言选择，暂支持 zh-CN: 简体中文, zh-TW: 正体中文 ， en: 英文 ， fr: 法语， pt-BR: 葡萄牙语， ru: 俄语， de: 德语， ja: 日语 |
      fontSize: "14px", //编辑区域文字大小
      scrollStyle: true, // 开启滚动条样式(暂时仅支持chrome)
      boxShadow: true, // 开启边框阴影
      boxShadowStyle: "0 2px 12px 0 rgba(0, 0, 0, 0.1)", // 边框阴影样式
      transition: true, // 是否开启过渡动画
      toolbarsBackground: "#ffffff", // 工具栏背景颜色
      previewBackground: "#fbfbfb", // 预览框背景颜色
      subfield: false, // true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)
      defaultOpen: "preview", // 在单栏（`subfield=false`）时默认展示区域. edit： 默认展示编辑区域， preview： 默认展示预览区域 其他 = edit
      placeholder: "开始编辑...", // 输入框为空时默认提示文本
      editable: false, // 是否允许编辑
      codeStyle: "code-github", // markdown样式： 默认github, [可选配色方案](/mavonEditor/src/lib/core/hljs/lang.hljs.css.js)
      toolbarsFlag: true, // 工具栏是否显示
      navigation: false, // 默认展示目录
      shortCut: true, // 是否启用快捷键
      autofocus: true, // 自动聚焦到文本框
      ishljs: true, // 代码高亮
      imageFilter: null, // 图片过滤函数，参数为一个`File Object`，要求返回一个`Boolean`, `true`表示文件合法，`false`表示文件不合法
      imageClick: null, // 图片点击事件，默认为预览，可覆盖
      tabSize: "\t", // tab转化为几个空格，默认为\t
      html: true, // 启用HTML标签，因为历史原因这个标记一直默认为true，但建议不使用HTML标签就关闭它，它能彻底杜绝安全问题。
      xssOptions: {}, // xss规则配置, 默认开启，设置false可以关闭，开启后会对HTML标签进行过滤，默认过滤所有HTML标签属性，建议按需配置白名单减少被攻击的可能。- 自定义规则参考: [https://jsxss.com/zh/options.html](https://jsxss.com/zh/options.html)- 参考DEMO: [dev-demo](/mavonEditor/src/dev/editor.vue)
      toolbars: {  // 工具栏显示那些工具
        bold: false, // 粗体
        italic: false, // 斜体
        header: false, // 标题
        underline: false, // 下划线
        strikethrough: false, // 中划线
        mark: false, // 标记
        superscript: false, // 上角标
        subscript: false, // 下角标
        quote: false, // 引用
        ol: false, // 有序列表
        ul: false, // 无序列表
        link: false, // 链接
        imagelink: false, // 图片链接
        code: false, // code
        table: false, // 表格
        fullscreen: false, // 全屏编辑
        readmodel: false, // 沉浸式阅读
        htmlcode: false, // 展示html源码
        help: false, // 帮助
        /* 1.3.5 */
        undo: false, // 上一步
        redo: false, // 下一步
        trash: false, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: false, // 导航目录
        /* 2.1.8 */
        alignleft: false, // 左对齐
        aligncenter: false, // 居中
        alignright: false, // 右对齐
        /* 2.2.1 */
        subfield: false, // 单双栏模式
        preview: false, // 预览
      },
    };
  },
  mounted() {
    console.log(this.importance);
  },
  methods: {
    goToDetail() {
      this.note = {
        id: this.id,
        noteTitle: this.title,
        noteContent: this.content,
        importance: this.importance,
        tags: this.tags
      };
      console.log(this.note);
      sessionStorage.setItem('note', JSON.stringify(this.note));
      jump('/note/write');
    }
  }
};
</script>

<style scoped>
.note-card {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
  border-radius: 4px;
  /* background: rgba(255, 255, 255, 0.7); */
}

h3 {
  font-size: 18px;
  color: #333;
}

.tags {
  margin-top: 10px;
}

.tag {
  background-color: #e4e4e4;
  padding: 5px 10px;
  margin-right: 5px;
  border-radius: 12px;
  font-size: 14px;
}

</style>